<template>
  <div>
     欢迎你:{{username}}
          <div>
      <el-avatar :src="imageUrl"></el-avatar>
          </div>
           <el-button type="primary" @click="denglu">登录</el-button> 
      <el-link type="primary" @click="signsout" >退出登录</el-link> 
       <el-upload
                        :show-file-list="false"
                        :before-upload="beforeUpload"
                        :on-success="onSuccess"
                        :on-error="onError"
                        :disabled="importDisabled"
                        style="display: inline-flex;margin-right: 10px;"
                        action="http://39.99.160.25:8088/users/web/importUsersExcel"
                        name="userFiles"
                        >
                    <el-button size="small" :disabled="importDisabled" type="success" :icon="importDataIcon">
                       {{importDataText}}
                    </el-button>
                </el-upload>
                
       <el-table
    :data="userslist"
   
   style="width: 100%"
    max-height="100%"
   
    >
    <el-table-column
      width="55">
    </el-table-column>
    <el-table-column
      prop="id"
      label="主键id"
      width="80">
    </el-table-column>
    <el-table-column
      prop="username"
      label="用户名"
      width="100">
    </el-table-column>
    <el-table-column
      prop="phone"
      label="联系方式"
      width="100">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址"
      width="150">
    </el-table-column>
    <el-table-column
      prop="remark"
      label="备注"
      width="100">
    </el-table-column>
    <el-table-column
      prop="authority"
      label="权限"
      width="80">
    </el-table-column>
     <el-table-column
      prop="head_portrait"
      label="头像"
      width="300">
      <template slot-scope="scope">
                        <img :src="scope.row.head_portrait" alt style="width: 100px;height:50px">
                      </template>
    </el-table-column>
     <el-table-column
      prop="identity_id"
      label="用户学号/工号"
      width="120">
    </el-table-column>
     <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete( scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
 <el-pagination
  background
  layout="prev, pager, next"
  :page-size="pageSize"
  :total="totalCount"
  @current-change="page">
</el-pagination>
  </div>
 
</template>
<style scoped>
 .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
</style>
<script>
  export default {
      methods:{
        denglu(){
          const _this=this
           _this.$router.push('/')
        },
        signsout(){
            const _this=this
             var storage = window.sessionStorage;
            storage.clear()
            this.$message('退出成功')
            _this.$router.push('/')
        },
          
      handleDelete(row) {
        const _this=this
        // var qs=require('qs')
        // console.log(row.identity_id)
        console.log(row.id)
        axios({
            method:"GET",
            url:"http://39.99.160.25:8088/users/web/delete?id="+row.id,
           // data:qs.stringify({}),
            headers:
            {
              "Authorization":sessionStorage.getItem("token")
            }
            
        }).then(function (resp){
          if(resp.data.data.msg=='删除数据成功'){
            console.log(resp)
              _this.$alert('《'+row.id+'》删除成功！', '消息',{
                confirmButtonText: '确定',
                 callback: action =>{
                    //  _this.$router.push({
                    //     path:'/users'
                    // })
                    window.location.reload();
                 }
              })
          }
        });
      },
          page(currentPage){
              alert(currentPage)
               const _this=this
                var qs = require('qs');
              

        axios({
          

            method:"post",
            url:"http://39.99.160.25:8088/users/web/users_list",
             data:qs.stringify({size:5,page:currentPage,sort:"id",asc:"asc"}),
            //data:{size:5,page:currentPage,sort:"id",asc:"asc"},
            headers:
            {
              "Authorization":　sessionStorage.getItem("token")
            }
            
        }).then(function (resp){
            console.log(resp)
        
            _this.userslist=resp.data.data.records.lists
            _this.totalCount=resp.data.data.records.totalCount
            _this.pageSize=resp.data.data.records.pageSize
        
        })
              
          },
           onError() {
                this.importDataText = '导入数据';
                this.importDataIcon = 'el-icon-upload2';
                this.importDisabled = false;
               // this.initEmps();
                this.$message.success("导入失败！");
            },
            // 导入文件成功后回调
            onSuccess() {
              // 成功后文本修改为原来的导入数据
                this.importDataText = '导入数据';
                // 图标修改
                this.importDataIcon = 'el-icon-upload2';
                // 将上传组件改为允许使用
                this.importDisabled = false;
                // 调用刷新数据的方法
                 this.selectall();
                //this.initEmps();
                // message 弹出消息
                this.$message.success("导入成功！");
            },
            // 上传文件调用
            beforeUpload() {
              // axios({
              //   url:'',
              //   method:'post',

              // }).then(function(res){

              // })
              // 将文本修改为正在导入
                this.importDataText = '正在导入';
                // 修改其图标
                this.importDataIcon = 'el-icon-loading';
                // 将其上传组件暂时禁用
                this.importDisabled = true;
            },
            selectall(){
 const _this=this
        var qs = require('qs');
        axios({
            method:"post",
            url:"http://39.99.160.25:8088/users/web/users_list",
             data:qs.stringify({size:5,page:1,sort:"id",asc:"asc"}),
            // data:{size:5,page:1,sort:"id",asc:"asc"},
            headers:
            {
              "Authorization":　sessionStorage.getItem("token")
            }
            
        }).then(function (resp){
            console.log(resp)
        
            _this.userslist=resp.data.data.records.lists
            _this.totalCount=resp.data.data.records.totalCount
            _this.pageSize=resp.data.data.records.pageSize
        })
    }
            
      },
    data() {
      
      return {
        importDataText: '导入数据',
    // 导入按钮的图标
    importDataIcon: 'el-icon-upload2',
    // 导入按钮是否被禁用
    importDisabled: false,
        username:sessionStorage.getItem('username'),
        imageUrl:sessionStorage.getItem('head_portrait'),
         totalCount:10,
         pageSize:1,
         input:'',
        // identity_id:'',
         
        userslist: [
        {
          id: '1',
          username: '张三',
          phone: '111',
          address: '111',
          remark: '111',
          authority: 0,
          head_portrait:'111',
          identity_id:'111'
        },
        {
          id: '2',
          username: '李四',
          phone: '222',
          address: '222',
          remark: '222',
          authority: 0,
          head_portrait:'222',
          identity_id:'222'
        }, 
        {
          id: '3',
          username: '王五',
          phone: '333',
          address: '333',
          remark: '333',
          authority: 0,
          head_portrait:'333',
          identity_id:'333'
        }, 
        {
           id: '4',
          username: '张四',
          phone: '444',
          address: '444',
          remark: '444',
          authority: 0,
          head_portrait:'444',
          identity_id:'444'
        }, 
        {
           id: '5',
          username: '张五',
          phone: '555',
          address: '555',
          remark: '555',
          authority: 0,
          head_portrait:'555',
          identity_id:'555'
        }, 
        {
          id: '6',
          username: '张六',
          phone: '666',
          address: '666',
          remark: '666',
          authority: 0,
          head_portrait:'666',
          identity_id:'666'
        }, 
        {
          id: '7',
          username: '小三',
          phone: '777',
          address: '777',
          remark: '777',
          authority: 0,
          head_portrait:'777',
          identity_id:'777'
        }
        ]
      }
    },
    created(){
this.selectall();
    }
  }
</script>